<template>
    <div>
        <div v-if="task.status_id === 0" style='margin: 20px 0px;'>
            <a-button @click="handle_add_pilot" type='primary'>新增</a-button>
            <a-button @click="editMainPilot=true" style='margin-left:12px;' type='primary' v-show="!editMainPilot">修改</a-button>
            <a-button @click="handle_edit_pilot" style='margin-left:12px;' type='primary' v-show="editMainPilot">保存</a-button>
            <a-button @click="handle_reduct_pilot" style='margin-left:12px;' type='primary' v-show="editMainPilot">还原默认</a-button>
        </div>
        
        <a-table :columns="pilotColumns" :dataSource="pilotList" rowKey="user_id" :pagination="pilotPagination" bordered>
            <template slot="tasked" slot-scope="text, record, index">
                <div style='overflow: auto; max-height: 100px; '>
                    <div style="color: #1890FF;" v-for="(item, index) in record.tasks" :key='index'>
                        {{item.sn+item.name}}
                    </div>
                </div>
            </template>
            <template slot="main" slot-scope="text, record, index">
                <a-icon type="check" v-if="record.is_main == 1"/>
                <a @click="handle_change_main_pilot(record)" v-else>设为主飞手</a>
            </template>
            <template slot="action" slot-scope="text, record, index">
                <a @click="handle_table_cancel_select_pilot(record)">取消选中</a>
            </template>
        </a-table>

                <!-- 选择飞手 start -->
        <a-modal
            title="选择飞手"
            :visible="pilotSelectVisible"
            @cancel='pilotSelectVisible=false'
            width='80%'
            >
            <a-table rowKey="user_id" :columns="pilotSelectColumns" :dataSource="pilotSelectList" :pagination="false" bordered>
                <template slot="tasked" slot-scope="text, record, index">
                    <div style='overflow: auto; max-height: 100px; '>
                        <div style="color: #1890FF;" v-for="(item, index) in record.tasks" :key='index'>
                            {{item.sn+item.name}}
                        </div>
                    </div>
                </template>
                <template slot="action" slot-scope="text, record, index">
                    <a @click="handle_cancel_select_pilot(record)" v-if="pilotListIds.includes(record.user_id)">取消选中</a>
                    <a @click="handle_select_pilot(record)" v-else>选中</a>
                </template>
            </a-table>
            <template slot="footer">
                <a-button key="submit" type="primary" @click="handle_submit_select_pilot">
                    确定
                </a-button>
        </template>
        </a-modal>
        <!-- 选择飞手 end -->
    </div>
</template>

<script>
    export default {
        props: {
            pilot_list: {
                type: Array,
                default: () => ([])
            },
            pilot_pagination: {
                type: Object,
                default: () => ({})
            },
            pilot_task: {
                type: Object,
                default: () => ({})
            }
        },
        computed: {
            pilotListIds(){
                return this.pilotList.map(pilot => pilot.user_id) || []
            }
        },
        watch: {
            pilot_list: {
                handler(value){
                    this.pilotList = JSON.parse(JSON.stringify(value)) || []
                },
                deep: true
            },
            pilot_pagination: {
                handler(value){
                    this.pilotPagination = value || {}
                },
                deep: true
            },
            pilot_task: {
                handler(value){
                    this.task = value || {}
                },
                deep: true
            }
        },
        data(){
            return {
                task: {},
                pilotList: [],
                pilotPagination: {},
                pilotColumns: [
                    {title: "飞手姓名", dataIndex: "realname", align: "center"},
                    {title: "账号", dataIndex: "username", align: "center"},
                    {title: "手机", dataIndex: "mobile", align: "center"},
                    {title: "已经承接的任务", scopedSlots: {customRender: "tasked"}, align: "center"},
                    {title: "主飞手", scopedSlots: {customRender: "main"}, align: "center"},
                    {title: "操作", scopedSlots: {customRender: "action"}, align: "center"},
                ],

                pilotSelectVisible: false,
                pilotSelectList: [],
                pilotSelectPagination: {
                    total: 0,
                    current: 1,
                    pageSize: 10,
                    showQuickJumper: true,
                    onChange: (page, size) => {
                        //列表展示条数改变
                        this.handle_pilot_select_list_pagination_change(page, size)
                    },
                },
                pilotSelectColumns: [
                    {title: "飞手姓名", dataIndex: "realname", align: "center"},
                    {title: "账号", dataIndex: "username", align: "center"},
                    {title: "手机", dataIndex: "mobile", align: "center"},
                    {title: "已经承接的任务", scopedSlots: {customRender: "tasked"}, align: "center"},
                    {title: "操作", scopedSlots: {customRender: "action"}, align: "center"},
                ],
                editMainPilot: false
            }
        },
        methods: {
            async handle_add_pilot(){
                const { task } = this
                if(task){
                    if(task.period_time){
                        let res = await this.http('get', 'pilot/no-task-pilot', {
                            time: task.period_time.split('-'),
                            task_id: task.id
                        })
                        this.pilotSelectList = res.data || []
                        this.pilotSelectVisible = true
                    }
                }
            },

            handle_submit_select_pilot(){
                this.pilotSelectVisible = false
            },

            handle_table_cancel_select_pilot(pilot){
                this.$confirm({
                    title: '系统提示',
                    content: `是否取消选中姓名${pilot.realname}？`,

                    okText: '确认',
                    cancelText: '取消',
                    onOk: async close => {
                        this.handle_cancel_select_pilot(pilot)
                        close()
                    }
                });
            },

            /** 弹窗取消选中飞手 */
            handle_cancel_select_pilot(pilot){
                if(this.editMainPilot){
                    let index = this.pilotList.findIndex(item => item.user_id === pilot.user_id)
                    console.log('index:', index)
                    if(index !== -1){
                        this.pilotList.splice(index, 1)
                    }
                }else{
                    this.$message.success('清先点击修改', 1)
                }
            },
            /** 弹窗选中飞手 */
            handle_select_pilot(pilot){
                this.pilotList.push(pilot)
            },
            handle_change_main_pilot(pilot){
                if(this.editMainPilot){
                    this.$confirm({
                        title: '系统提示',
                        content: `是否将姓名${pilot.realname}选为主飞手？`,
                        okText: '确认',
                        cancelText: '取消',
                        onOk: async close => {
                            let pilotList = this.pilotList
                            let index = pilotList.findIndex(item => item.user_id === pilot.user_id)
                            if(index !== -1){
                                pilotList.forEach(item => {
                                    item.is_main = 0
                                })
                                pilot.is_main = 1
                                this.pilotList = pilotList
                            }
                            close()
                        }
                    });
                }else{
                    this.$message.success('清先点击修改', 1)
                }
            },
            handle_reduct_pilot(){
                this.pilotList = this.pilot_list
            },

            handle_edit_pilot(){
                this.$parent.edit_pilot(this.pilotList)
            }

        },
        mounted(){
            console.log(this.pilot_task)
            this.task = this.pilot_task
        }
    }
</script>

<style lang="scss" scoped>

</style>